<template>
    <div>
        <home-header :city="this.city"></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-icons></home-icons>
        <home-recommend></home-recommend>
        <home-weekend></home-weekend>
    </div>
</template>

<script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper.vue';
    import HomeIcons from './components/Icons.vue';
    import HomeRecommend from './components/Recommend.vue';
    import HomeWeekend from './components/Weekend.vue';
    import axios from 'axios';
    export default {
        name:'Home',
        data(){
            return { 
                city:'',
                swiperList:[],
                };
        },
        components:{
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeRecommend,
            HomeWeekend
        },
        methods:{
            getHomeInfo:function(){
               axios.get('/api/index.json').then(this.getHomeInfoSucc);
            },
            getHomeInfoSucc:function(res){
                res=res.data;
               console.log(res.data);
               this.city=res.data.city;
               this.swiperList=res.data.swiperList;
            }
        },
        mounted:function(){
           this.getHomeInfo();
        }
    }
</script>

<style lang="stylus" scoped>

</style>